<template>
    <div class="head">
        <ul class="head-ul">
            <li @click="light = 1">
                <!-- 路由线路跳转到相应的页面 -->
                <!-- 路由切换时，选中哪个路由，这个路由就被激活，当前页面所有与此路由匹配的链接（父级/子级）都
                     会被加上这个class：router-link-active，绑定的css样式也就生效了 -->
                <router-link to="/" :class="[{ active: light == 1 }]">电影</router-link>
            </li>

            <li @click="light = 2">
                <router-link to="/video" :class="[{active: light == 2}]">小视频</router-link>
            </li>

            <li @click="light = 3">
                <router-link to="mine" :class="[{active:light == 3}]">我的</router-link>
            </li>
        </ul>
    
    </div>
</template>

<script>
export default {
    data(){
        return{
            light:1,
        };
    },
};
</script>

<style scoped>


   *{
    margin: 0;
    padding: 0;
   }

   .head{
    width: 100%;
    height: 7vh;
    background-color: white;
    position: fixed;
    bottom: 0px;
    z-index: 999;
   }
   .head .head-ul{
    width: 100%;
    display: flex;
    height: 7vh;
    justify-content: space-around;
   }

   .head .head-ul li{
    display: flex;
    font-size: 20px;
    padding: 20px;
    font-family: "宋体";
   }

   /* .head .head-ul li {
    flex: 1;
   }    设置左侧固定，右侧自适应；或者左右固定，中间自适应，  flex：1是由flex-grow，flex-shrink与flex-basic组成，
        flex: 1: 自动填充满剩余空间，如果有两个地方设置了flex，按着flex-grow的规则分配剩余空间 
        什么意思？假设一个flex弹性盒中有三个子元素，child1，child2分别
        设置了flex：1，flex2，child1宽度固定为200px，
        那么现在child1的宽度为200px，child2的宽度为600px，child的宽度不变还是200px
   */

   .head .head-ul a.active{
    color:red;
   }
   .head .head-ul li .ico {
    /* 点击区域成块显示 */
       display: block;  
   }
   
</style>